#{extends 'mainFMPA.html' /}#{set title:'nouvelle FMPA' /}

<script type="text/javascript" src="../../../public/javascripts/jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="../../../public/javascripts/jquery-ui-1.8.13.custom/development-bundle/ui/i18n/jquery.ui.datepicker-fr.js"></script>

<SCRIPT>
	$(function() {
		$( "#date" ).datepicker();
	});
</SCRIPT>

<h3>Ajouter une FMPA</h3>
     
#{form @newFMPASave()}
 
 <style type="text/css">
 	.hidden {
 		display: none;
	}
	.visible {
 		display: inline;
	}
</style>
    <p>
 	    <label for="cis" id="cis">CIS* :</label>
        #{select 'cis', items:centres, id:'cis', valueProperty:'id', value:idCis,}
        #{/select}
    </p>
    <p>
        <label for="date">Date* :</label>
        <input type="text" name="date" id="date" value="${fmpa?.date?.format('dd/MM/yyyy', 'fr')}" />
    <p>
    <p>
 	    <label for="thematique">Th&eacute;matique* :</label>
        #{select 'thematique', items:thematiques, id:'thematique', valueProperty:'id', value:fmpa?.thematique?.id, onChange:'change()'}
        	#{option 0}-- Choisir une valeur --#{/option}
        #{/select}
    </p>
    <p id="aModifier">
    </p>
    <p>
 	    <label for="Them">Th&egrave;me :</label>
    	<textarea name="Theme" id="Theme" >${fmpa?.sousThematique}</textarea>
        
    </p>
    <p>
 	    <label for="description">Description :</label>
    	<textarea name="description" id="description" >${fmpa?.description}</textarea>
        
    </p>
    <p>
 	    <label for="duree">Dur&eacute;e* :</label>
        #{select 'duree', items:durees, id:'duree', value:fmpa?.duree?.id}
            #{option 0}-- Choisir une valeur --#{/option}
        #{/select}
    </p>
    <p>
       	<label for="observation">Observation :</label>
    	<textarea name="observation" id="observation" >${fmpa?.observation}</textarea>
    </p>
    <p>
    <br />
    <p style="margin-top:30px; margin-left:170px;">    
        <input type="submit" value="Enregistrer la FMPA" id="boutonEnregistrer"/>
        <input type="button" onClick="self.location.href='@{FMPAs.listFMPA()}'" value="retour" />
    </p>
    <p style="font-size:16px;"><i>* Champs obligatoires<i></p>
#{/form}

<SCRIPT type="text/javascript">
	function change(){
	    var maThematique=document.getElementById("thematique").options[document.getElementById("thematique").selectedIndex].value
	    $('#aModifier').load("/theme/"+maThematique)
	}
</SCRIPT>
        
<SCRIPT type="text/javascript">
	function ajoutTheme(){
	    var monTheme=document.getElementById('sousThematique').options[document.getElementById('sousThematique').selectedIndex].value
	    if(document.getElementById('Theme').value==""&& monTheme!=0){
	    	document.getElementById('Theme').value+=monTheme
	    }else if(monTheme!=0){
	    document.getElementById('Theme').value+=", "+monTheme
	    }
	}
</SCRIPT>